<template>
  <div id="resultUpload">
    <el-card shadow="never">
        <!-- 搜索框栏 -->
        <div class="searchBar" style="width:100%;display: flex;flex-direction: row; align-items: center;">
          <!-- 药品名称输入框 -->
          <el-form-item>
            <el-input placeholder="请输入患者姓名" style="width: 200px;margin-right:5px;" v-model="formData.name" @keyup.enter="debounceSearch"></el-input>
            <el-input placeholder="请输入患者身份证号" style="width: 300px;margin-right: 5px;" v-model="formData.personId" @keyup.enter="debounceSearch"></el-input>
            <el-input placeholder="请输入检查项目编码" style="width: 300px;" v-model="formData.code" @keyup.enter="debounceSearch">
              <template #append>
                <el-button style="color: #FFFFFF;background-color: #3b82f6;" :icon="Search" @click="debounceSearch" />
              </template>
            </el-input>
          </el-form-item>
        </div>
        <el-divider></el-divider>
        <!-- 表格 -->
        <el-card shadow="never">
        <el-table :data="tableData" style="width: 100%;font-size: 14px;" stripe show-overflow-tooltip >
          <el-table-column fixed prop="patientName" label="患者姓名" width="120" align="center"></el-table-column>
          <el-table-column prop="personId" label="患者身份证号" width="120" align="center"></el-table-column>
          <el-table-column prop="age" label="患者年龄" width="120" align="center"></el-table-column>
          <el-table-column fixed prop="doctorName" label="开单医生姓名" width="120" align="center"></el-table-column>
          <el-table-column prop="reason" label="原因" width="120" align="center"></el-table-column>
          <el-table-column prop="result" label="检查结果图片" width="180" align="center">
            <template #default="scope">
              <el-upload
                  class="avatar-uploader"
                  action="http://localhost:8080/v1/file/upload"
                  :show-file-list="false"
                  :on-success="(res, file) => handleAvatarSuccess(res, file, scope.row)"
                  :before-upload="beforeAvatarUpload"
              >
                <el-image
                    v-if="scope.row.result"
                    :src="scope.row.result"
                    class="avatar"
                    :preview-src-list="[scope.row.result]"
                    :initial-index="0"
                    fit="cover"
                />
                <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
              </el-upload>
            </template>
          </el-table-column>

          <el-table-column prop="standard" label="检查要求" width="120" align="center"></el-table-column>
          <el-table-column prop="name" label="检查项名称" width="120" align="center"></el-table-column>
          <el-table-column prop="code" label="检查项编号" width="120" align="center"></el-table-column>
          <el-table-column prop="createTime" label="创建时间" width="180" align="center"></el-table-column>
          <el-table-column prop="remark" label="备注" width="120" align="center"></el-table-column>
          <el-table-column fixed="right" label="操作" width="150" align="center">
            <template #default="scope">
              <el-button type="success" plain @click="saveUpload(scope.row)">完成检查</el-button>
            </template>
          </el-table-column>
        </el-table>
        </el-card>
    </el-card>
  </div>
</template>

<script setup>
import {onMounted, ref} from 'vue'
import {Search, Plus} from "@element-plus/icons";
import qs from "qs";
import axios from "axios";
import {ElMessage} from "element-plus";

/*定义表单数据*/
const formData = ref({
  name: '',
  personId: '',
  code: ''
})

/*定义点击搜索按钮方法*/
const debounceSearch = () => {
  console.log('搜索参数为:', formData.value)
  let data = qs.stringify(formData.value)
  console.log("搜索参数为:", data);
  axios.get(TEST_URL + '/v1/inspection/selectUnInspected?' + data).then((res) => {
    console.log("加载检查单接口响应数据", res.data);
    if (res.data.code == 2001) {
      ElMessage({
        message: "加载成功",
        type: "success"
      });
      tableData.value = res.data.data.map(item => ({
        ...item,
        result: item.result ? 'http://localhost:8080' + item.result : ''
      }));
    } else {
      ElMessage({
        message: res.data.data.message,
        type: "error"
      });
    }
  })
}

/*定义表格数据*/
const tableData = ref([])

/*页面渲染立即执行*/
onMounted(() => {
  console.log('页面渲染完成')
  debounceSearch();
})

const handleAvatarSuccess = (res, file, row) => {
  console.log("上传成功", res);
  ElMessage({
    message: "上传成功",
    type: "success"
  });
  row.result = 'http://localhost:8080' + res.data;
}

const beforeAvatarUpload = (file) => {
  const isImage = file.type.startsWith('image/');
  const isLt2M = file.size / 1024 / 1024 < 2;

  if (!isImage) {
    ElMessage.error('只能上传图片文件!');
    return false;
  }
  if (!isLt2M) {
    ElMessage.error('图片大小不能超过 2MB!');
    return false;
  }
  return true;
}

/*定义保存上传的检查结果的图片接口*/
const saveUpload = (row) => {
  /*判断上传的图片是否为空*/
  if (!row.result) {
    ElMessage({
      message: "请上传检查结果图片",
      type: "warning"
    });
    return;
  }
  const subInspectionEditParam = {
    inspectionId: row.inspectionId,
    inspectionItemId: row.inspectionItemId,
    status: '20',
    result: row.result
  };
  let data = qs.stringify(subInspectionEditParam);
  console.log("保存检查结果接口参数", data)
  axios.post(TEST_URL + '/v1/inspection/edit', data, {
    headers: {
      'Content-Type': 'application/x-www-form-urlencoded'
    }
  }).then((res) => {
    console.log("保存检查结果接口响应数据", res.data);
    if (res.data.code == 2001) {
      ElMessage({
        message: "保存成功",
        type: "success"
      });
      // 移除 debounceSearch 调用
      debounceSearch();
    } else {
      ElMessage({
        message: res.data.data.message,
        type: "error"
      });
    }
  }).catch((err) => {
    console.log("保存检查结果接口错误", err);
    ElMessage({
      message: "保存失败",
      type: "error"
    });
  });
}
</script>

<style scoped>
.avatar-uploader .avatar {
  width: 78px;
  height: 78px;
  display: block;
}
.avatar-uploader .el-upload {
  border: 1px dashed var(--el-border-color);
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: var(--el-transition-duration-fast);
}

.avatar-uploader .el-upload:hover {
  border-color: var(--el-color-primary);
}

.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 78px;
  height: 78px;
  text-align: center;
}
</style>
